<template>
  <div>
    <el-row>
      <el-col :span="24">
        {{ new Date(date).getDate() }}
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="radius border-radius-10 border-green">

          <el-col v-for="(value, key) in recipes" :key="key" :span="24" class="bg-color-green el-row-height-25">
            <el-col :span="4" class="bg-color-green flex-center">
              <span class="font-simHei-20">{{ key }}</span>
            </el-col>
            <el-col :span="20" class="bg-color-white el-row-height-100">
              <el-alert
                v-for="(recipe, type) in value"
                :key="type"
                type="success"
                :closable="false"
                show-icon
              >
                <template slot="title">{{ recipe.food }}</template>
              </el-alert>
            </el-col>
          </el-col>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { selectListByDateOrDefault } from '@/api/recipe'

export default {
  name: 'CalanderDay',
  props: {
    // 日历所在各自的数据（包含选中状态、日期等）
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    // 日历所在格子的日期
    date: {
      type: Date,
      default() {
        return ''
      }
    }
  },

  data() {
    return {
      calanderData: this.data,
      calanderDate: this.date,
      recipes: [] // 食谱（当日）
    }
  },
  computed: {
    /**
     * 早餐
     */
    breakfirst() { return this.recipes['早餐'] },
    /**
     * 午餐
     */
    lunch() { return this.recipes['午餐'] },
    /**
     * 午晚餐
     */
    linner() { return this.recipes['加餐'] },
    /**
     * 晚餐
     */
    dinner() { return this.recipes['晚餐'] }
  },
  created() {
    // 初始化组件数据
    this.initData()
  },
  methods: {
    /**
       * 初始化组件数据
       */
    initData() {
      // 初始化食谱数据
      this.selectListByDateOrDefault({ date: this.calanderDate })
    },
    /**
     * 获取某天的食谱数据。参数：日期，默认当日
     */
    selectListByDateOrDefault(date) {
      selectListByDateOrDefault(date).then(response => {
        this.recipes = response.data
      })
    }
  }
}
</script>

<style>
.radius {
  height: 580px;
  width: 100%;
  border: 2px solid #d7dae2;
  border-radius: 0;
  margin-top: 20px;
  margin-bottom: 20px;
}

.border-radius-10 {
  border-radius: 10px;
}

.border-green {
  border-color: greenyellow;
}

.bg-color-green {
  background-color: greenyellow;
}

.bg-color-white {
  background-color: white;
}

.el-row-height-25 {
  height: 25%;
}

.el-row-height-100 {
  height: 100%;
}

.flex-center {
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}

.font-simHei-20 {
  font-family: '黑体';
  font-size: 20px;
}
</style>
